﻿<div nz-row nzGutter="16">
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzTitle]="basicArea">
            <ng-template #basicArea>
                面积图
                <small class="text-sm font-weight-normal">基础面积图</small>
            </ng-template>
            <v-chart [forceFit]="true" [height]="275">
                <v-tooltip></v-tooltip>
                <v-axis></v-axis>
                <x-area url="/api/area"></x-area>
            </v-chart>
        </nz-card>
    </div>
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzTitle]="multiArea">
            <ng-template #multiArea>
                面积图
                <small class="text-sm font-weight-normal">多区域面积图</small>
            </ng-template>
            <v-chart [forceFit]="true" [height]="275">
                <v-tooltip [crosshairs]="{ type: 'line' }"></v-tooltip>
                <v-axis></v-axis>
                <v-legend></v-legend>
                <x-area url="/api/area/multi"></x-area>
            </v-chart>
        </nz-card>
    </div>
</div>